<!-- @format -->

<template>
  <div>
    <!-- 头部组件 -->
    <MyHeader title="Tabbar案例" />
    <!-- 主体内容 -->
    <div class="main">
      <!-- 动态组件 -->
      <component :is="cpName" />
    </div>
    <!-- 底部组件 -->
    <MyTabbar
      :list="tabList"
      @switch="switchFn" />
  </div>
</template>

<script>
  // 导入5个组件
  import MyHeader from './components/MyHeader.vue'
  import MyTabbar from './components/MyTabbar.vue'
  import MyGoodsList from './components/MyGoodsList.vue'
  import MyGoodsSearch from './components/MyGoodsSearch.vue'
  import MyUserInfo from './components/MyUserInfo.vue'
  export default {
    // (局部)注册5个组件
    components: {
      MyHeader,
      MyTabbar,
      MyGoodsList,
      MyGoodsSearch,
      MyUserInfo
    },
    data() {
      return {
        cpName: 'MyGoodsList',
        // 底部tab栏列表
        tabList: [
          {
            iconText: 'icon-shangpinliebiao',
            text: '商品列表',
            componentName: 'MyGoodsList'
          },
          {
            iconText: 'icon-sousuo',
            text: '商品搜索',
            componentName: 'MyGoodsSearch'
          },
          {
            iconText: 'icon-user',
            text: '我的信息',
            componentName: 'MyUserInfo'
          }
        ]
      }
    },
    methods: {
      switchFn(i) {
        this.cpName = this.tabList[i].componentName
      }
    }
  }
</script>

<style>
  .main {
    padding: 45px 0 50px;
  }
</style>
